<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/BigData/loadjs.js?v=1"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=l4zKPgF3ihF8lciY2QGmpsvW"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
		<style type="text/css">
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
			}

			.close {
				background: orange;
				color: red;
				border-radius: 12px;
				line-height: 20px;
				text-align: center;
				height: 20px;
				width: 20px;
				font-size: 18px;
				padding: 1px;
			}

			/* use cross as close button */
			.close::before {
				content: "\2716";
			}

			.mapTip {
				display: inline-block;
				width: auto;
				-webkit-column-width: 310px;
			}

			.b {
				FONT-WEIGHT: bold;
			}

			.menuHistoryPlay {
				width: 28px;
				height: 28px;
				background-image: url("images/gpsicon/historyline24.png");
				background-repeat: no-repeat;
				background-size: 24px 24px;
				display: block;
				cursor: hand;
			}
		</style>

		<script src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['layer', 'jquery', 'form', 'element', 'laydate'], function() {
				var element = layui.element;
				var form = layui.form;
				var laydate = layui.laydate;
				var dtNow = (new Date());
				var sStartTime = formatterSearch(dtNow, "00:00:01");
				var sEndTime = formatterSearch(dtNow, "23:59:59");
				//自定义验证规则
				form.verify({
				  select_input: function(value){
					if($('#select_input').attr("tag").length == 0){
						return arrLang.ParErr;
					}
				  },
				  historyTime: function(value){
					  if(value.length < 10){
						  return arrLang.ParErr;
					  }
				  }
				});
				laydate.render({
					elem: '#historyTime',
					type: 'datetime',
					range: true,
					max: 1,
					value: sStartTime + " - " + sEndTime
				});
				form.on('submit(btnHistoryQuery)', function(data) {
					var arrSubmit = (data.field);
					arrSubmit.time = $('#historyTime').val();
					if(arrSubmit["historySpeed"] == undefined){
						arrSubmit["historySpeed"] = 0;
					}
					else{
						arrSubmit["historySpeed"] = 1;
					}
					if(arrSubmit["historyLocation"] == undefined){
						arrSubmit["historyLocation"] = 0;
					}
					else{
						arrSubmit["historyLocation"] = 1;
					}
					/* layer.alert(JSON.stringify(arrSubmit), {
						title: '最终的提交信息'
					}) */
					var sTimeBegin = arrSubmit.time.split(' - ')[0].trim();
					var sTimeEnd = arrSubmit.time.split(' - ')[1].trim();
					QueryHistory($('#select_input').attr("tag"), sTimeBegin, sTimeEnd, arrSubmit["historySpeed"], arrSubmit["historyLocation"])
					return false;
				});
			});

			var bDocumentComplete = false;
			document.onreadystatechange = function() {
				if (document.readyState == "complete") {
					bDocumentComplete = true;
				}
			}
			var map;
			var mapBaidu;
			var timeVersion = (new Date()).getTime();
			loadScript([{
				"path": "js/index.js?t=" + timeVersion,
				"type": "js"
			}, {
				"path": "css/Scrollview.css?t=" + timeVersion,
				"type": "css"
			}], LoadMainJs);

			function LoadMainJs() {
				LoadMain();
			}

			function jsCallback() {
				loadScript([{
					"path": "js/BaiduMap/BaiduLatLngCorrect.js?t=" + iVersion,
					"type": "js"
				}, {
					"path": "js/BaiduMap/mapv.js?t=" + iVersion,
					"type": "js"
				}, {
					"path": "js/BaiduMap/BaiduHistoryMap.js?t=" + iVersion,
					"type": "js"
				}, {
					"path": "gpsform/htmlHistorySearch.js?t=" + iVersion,
					"type": "js"
				}], function() {
					var loadFun = function() {
						globalSettings = parent.globalSettings;
						if (globalSettings["lang"] == "Zh") {
							arrLang = arrLanZHCN;
						} else {
							arrLang = arrLanEn;
						}
						SetCancelAlarm();
						ChangeLan("body", arrLang);

						$('#historySpeed').next().find('span').html(arrLang.Speed);
						$('#historyLocation').next().find('span').html(arrLang.Location);
						$('#btnPause').on('click',function(){
							if($('#btnPause').text() == arrLang.Pause){
								bPlay = false;
								$('#btnPause').text(arrLang.Play);
							}
							else{
								bPlay = true;
								$('#btnPause').text(arrLang.Pause);
							}
						});
						mapBaidu = new BMap.Map("map", {
							minZoom: 3,
							maxZoom: 19,
							enableMapClick: false
						});
						map = mapBaidu;
						var dLatCenter = 36.910400;
						var dLngCenter = 102.362240;
						if (dMapCenterX != 0 && dMapCenterY != 0) {
							var googleXY = CheckXYGpsToBaidu(dMapCenterX, dMapCenterY);
							dLngCenter = googleXY[0].lng;
							dLatCenter = googleXY[0].lat;
						}
						var point = new BMap.Point(dLngCenter, dLatCenter); // 创建点坐标
						mapBaidu.centerAndZoom(point, 5); // 初始化地图,设置中心点坐标和地图级别。
						mapBaidu.enableScrollWheelZoom(); //启用滚轮放大缩小
						mapBaidu.addControl(new BMap.NavigationControl()); //启用导航控件
						mapBaidu.addControl(new BMap.MapTypeControl({
							mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
						}));
						mapBaidu.addEventListener("moving", function(e) {
							var pointCenter = mapBaidu.getCenter();
							dMapZoom = mapBaidu.getZoom();
							var baiduXY = CheckXYBaiduToGps(pointCenter.lng, pointCenter.lat);
							dMapCenterX = baiduXY[0].lng;
							dMapCenterY = baiduXY[0].lat;
						});
						AddHistoryMapv(1);
						sGlobalToken = parent.sGlobalToken;
						var funVagueSelect;
						funVagueSelect = function(){
							if(parent.bGlobalGetTerminal){
								vagueselect($('#find_History_TreeVehs'), 'single', "name,ipaddress,ownno", function(id, text) {

								}, parent.arrGlobalTerminal);
							}
							else{
								setTimeout(function(){
									funVagueSelect();
								},1500);
							}
						}
						funVagueSelect();
					}
					if (bDocumentComplete) {
						loadFun();
					} else {
						$(document).ready(function() {
							loadFun();
						});
					}
				});
			}

			var infoWindowVeh;
			var infoWindowVehID;

			function TerminalIconClick(item) {
				if (item == null || item == undefined) {
					return;
				}
				globalIconClickID = item.item["id"];
				if (item.item["time"] == undefined) {
					item.item["time"] = "";
				}
				if (item.item["positionstatus"] == undefined) {
					item.item["positionstatus"] = "";
				}
				if (item.item["unitstatus"] == undefined) {
					item.item["unitstatus"] = "";
				}
				if (item.item["speedangle"] == undefined) {
					item.item["speedangle"] = "";
				}
				/* var sHtml = "<label datalang='Plate'>" + arrLang["Plate"] + "</label>：" + item.item["name"];
				sHtml += "&nbsp;&nbsp;&nbsp;&nbsp;<label datalang='Time'>" + arrLang["Time"] + "</label>：" + item.item["time"];
				sHtml += "<br /><label datalang='State'>" + arrLang["State"] + "</label>：" + item.item["positionstatus"] + item.item[
					"unitstatus"];
				sHtml += "<br /><label datalang='SpeedAngle'>" + arrLang["SpeedAngle"] + "</label>：" + item.item["speedangle"];
				if (item.item["mileage"] != undefined) {
					sHtml += "&nbsp;&nbsp;&nbsp;<label datalang='Mileage'>" + arrLang["Mileage"] + "</label>：" + (item.item["mileage"] /
						1000.0).toFixed("0.0") + "<label datalang='Km'>" + arrLang["Km"] + "</label>";;
				}
				sHtml += "&nbsp;&nbsp;&nbsp;<label datalang='Oil'>" + arrLang["Oil"] + "</label>：" + (item.item["Oil"] == undefined ?
					"" : item.item["Oil"]);
				sHtml += "<br /><label datalang='Address'>" + arrLang["Address"] + "</label>：<label id='lblLocation'></label>";
				 */
				var sHtml = '<div class="mapTip"><span class="b">' + arrLang["Time"] + '：</span>&nbsp;' + item.item["time"] +
					'&nbsp;&nbsp;&nbsp;&nbsp;<br />' +
					'<span class="b">' + arrLang["SpeedAngle"] + '：</span>&nbsp;' + item.item["speedangle"] + '<br />' +
					'<span class="b">' + arrLang["Address"] + '：</span><span id="lblLocation"></span><br />' +
					'<span class="b">' + arrLang["Mileage"] + '：</span>&nbsp;' + (item.item["mileage"] / 1000.0).toFixed("0.0") +
					arrLang["Km"] + '</label>&nbsp;&nbsp;&nbsp;&nbsp;' +
					'<span class="b">' + arrLang["Oil"] + '：</span>&nbsp;' + (item.item["Oil"] == undefined ? "" : item.item["Oil"]) +
					'</label><br />' +
					'<span class="b">' + arrLang["State"] + '：</span>&nbsp;' + item.item["positionstatus"] + item.item["unitstatus"] +
					'<br />' +
					'<span class="menuHistoryPlay" title="' + arrLang["HistoryPlay"] +
					'" onclick="" onmouseout="">&nbsp;&nbsp;</span></div>';

				//$('#mapTipsDetail').html(sHtml);
				/* $('#divIconClickCancel')[0].addEventListener('click', function(e) {
					globalIconClickID = "";
					$('#mapTips').hide();
				}); */
				infoWindowVehID = item.item["id"];
				var pointinfoWindow = new BMap.Point(item.geometry.coordinates[0], item.geometry.coordinates[1]);
				openInfoWindowTip(item.item["name"], sHtml, pointinfoWindow);
				/* if(infoWindowVeh == undefined){
					infoWindowVeh = new BMap.InfoWindow(sHtml); 
					map.openInfoWindow(infoWindowVeh, pointinfoWindow);
				}
				else{
					infoWindowVeh.setContent(sHtml);
					infoWindowVeh.redraw();
					map.openInfoWindow(infoWindowVeh,pointinfoWindow);
				} */
				addressIconClickTick = (new Date()).getTime();
				if (item.item["lng"] != undefined && item.item["lng"] != 0 && item.item["lat"] != 0 && item.item["lat"] !=
					undefined) {
					var iSnt = addressIconClickTick;
					var sLanT = globalSettings["map"];
					if (globalSettings["lang"] != "Zh") {
						sLanT = "Google";
					}

					parent.GetLatLngAddress(sLanT, item.item["lng"], item.item["lat"], iSnt, function(add, sn) {
						if (addressIconClickTick == sn) {
							$('#lblLocation').text(add);
							infoWindowVeh.redraw();
						}
					});
				}

				//$('#mapTips').show();

			}

			function openInfoWindowTip(name, content, point) {
				var opts = {
					width: 300, // 信息窗口宽度
					//height: 160,     // 信息窗口高度
					title: name, // 信息窗口标题
					enableMessage: false, //设置允许信息窗发送短息
					enableAutoPan: false
				};
				infoWindowVeh = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
				map.openInfoWindow(infoWindowVeh, point); //开启信息窗口
			}

			function openW() {
				openInfoWindowTip("ss", new BMap.Point(38.865833333333335, 9.007483333333333));
			}
		</script>
	</head>
	<body style="overflow: hidden;">
		<div id="historyMapQuery" class="scrollbarx" style="opacity:1; height: 47px; margin-top: 5px; overflow-x: auto; overflow-y: hidden;padding-left: 5px">
			<form class="layui-form" action="" lay-filter="historyForm">
				<div class="layui-form-item" style="display: flex; min-width: 700px;">
					<div class="layui-input-inline" id="find_History_TreeVehs" name="single_history_select" style="width: 230px;">
						<div class="layui-form-select" style="width: 99%;">
							<div class="layui-select-title">
								<input type="text" class="layui-input" attrlang="placeholder,SearchFilter" placeholder="" name="select_input"
								 id="select_input" lay-verify="required|select_input" autocomplete="off">
								<i class="layui-edge"></i>
							</div>
						</div>
					</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" lay-verify="required|historyTime" id="historyTime" attrlang="placeholder,Time" placeholder="">
					</div>
					<div class="layui-input-inline" style="display: flex;">
						<input type="checkbox" id="historySpeed" name="historySpeed" autocomplete="off" title="Speed" checked="">
						<input type="checkbox" id="historyLocation" name="historyLocation" autocomplete="off" title="Location" checked="">
					</div>
					
					<div class="layui-input-inline" style="display: flex;">
						&nbsp;&nbsp;<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="btnHistoryQuery"
						 datalang="Query"></button>
						<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="historyExport" datalang="Export"></button>
						
					</div>
				</div>
			</form>
		</div>

		<div class="layui-form-select2">
			<dl id="find_History_TreeVehs_select_show" name="find_History_TreeVehs_select_show" class="layui-anim layui-anim-upbit">
				<dd lay-value="" class="layui-select-tips" style="text-align: center">
					<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
				</dd>
			</dl>
		</div>
		<div id="map" onclick="this.focus();" style="width: 100%;overflow: hidden;margin:0; left: 0px; top: 50px; bottom: 0px; position: absolute;"></div>
		<div id="mapTips" style="width:100%;height: 140px; padding: 10px; display: none; z-index: 55; border-bottom: 2px solid #00CC00;background-color:#FFFFFF; font-size:14px; position:fixed; top:0;_position:relative; z-index:100; _top:expression(offsetParent.scrollTop+0);">
			<div id="mapTipsDetail"></div>
			<div id='divIconClickCancel' style='float:right; top:0; position:absolute; right:0; padding:25px;'><span class='close'></span></div>
		</div>
		<div style="position: absolute; left: 60px; top: 60px; ">
			<button type="button" id="btnPause" style="float: left;" class="layui-btn layui-btn-normal layui-btn-sm" datalang="Pause">&nbsp</button>
			<ul class="layui-nav layui-bg-blue btnz" lay-filter="" style="font-size: 12px;border-radius: 0px;float: left;padding:0px 0px 0px 0px;margin-left: 1px;">
			    <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
			        <a href="javascript:;" style="color:white;font-size: 12px;padding: 0px 30px 0px 20px;"><label datalang="More">&nbsp;</label><span class="layui-nav-more" style="right: 10px;font-size: 12px;"></span></a>
			        <dl class="layui-nav-child" style="top: 30px;line-height: 31px;padding: 0px 0px 0px 0px;"> <!-- 二级菜单 -->
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_HistoryData" datalang="HistoryData">&nbsp;</button></dd>
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_cjb" >测距</button></dd>
			        </dl>
			    </li>
			</ul>
		</div>
	</body>
</html>
